/**
 * @desc: 组合商品
 */

import React, { useState, useRef } from 'react';
import GoodsSearch from './component/GoodsSearch';
import GoodsList from './component/GoodsList';
import CountGoods from './component/CountGoods';

const CombinaGoods = () => {

  //查询条件
  const [query, setQuery] = useState({});

	//控制表格是否从新请求数据
	const [tableKey, setTableKey] = useState(1);

	//控制统计信息是否从新请求数据
	const [ countKey, setCountKey ] = useState(1);

	const divEl  = useRef(null);

  //搜索props
  const GoodsSearchProps = {
    //点击查询按钮
    handleOk(val) {
      setQuery(val);
      setTableKey(tableKey+1);
    },

    //点击重置按钮
    handleReset() {
      setQuery({});
      setTableKey(tableKey+1);
    },
  };

	//统计props
	const CountGoodsProps = {
		countKey,
		tableKey,
	}

  //表格props
  const GoodsListProps = {
    tableKey,
		divEl,
		query,
		handleOk() {
			setCountKey(countKey+1);
		}
  };

  return (
    <>
      <div className="zjf-container">
				<div ref={divEl}>
					<GoodsSearch {...GoodsSearchProps} />
					<CountGoods { ...CountGoodsProps} />
				</div>
        <GoodsList {...GoodsListProps} />
      </div>
    </>
  );
};

export default React.memo(CombinaGoods, () => {
  return true;
});
